<template>
    <div>
        <lay-page-header @back="handleBack"></lay-page-header>
        <div class="layui-row layui-col-space15 clearfix">
            <div class="layui-col-md16 left">
                <div class="article-detail shadow">
                    <div class="article-tool">
                        <div style="float:left;">
                            <button class="layui-btn layui-btn layui-btn-xs" title="发布日期">
                                {{ news.adddate }}
                            </button>
                            <div class="layui-btn-group">
                                <button class="layui-btn layui-btn layui-btn-xs" title="浏览">
                                    <i class="fa fa-eye fa-fw"></i><span style="margin-left:3px;">{{ news.views }}</span>
                                </button>
                                <button class="layui-btn layui-btn layui-btn-xs" title="评论">
                                    <i class="fa fa-comments fa-fw"></i><span style="margin-left:3px;">0</span>
                                </button>
                            </div>
                        </div>
                        <div class="tool-box">
                            <div class="layui-btn-group layui-hide-xs">

                                <button class="layui-btn layui-btn layui-btn-xs" title="字体缩小">
                                    <i class="fa fa-minus fa-fw"></i>
                                </button>
                                <button class="layui-btn layui-btn layui-btn-xs" title="字体还原">
                                    <i class="fa fa-undo fa-fw"></i>
                                </button>
                                <button class="layui-btn layui-btn layui-btn-xs" title="字体放大">
                                    <i class="fa fa-plus fa-fw"></i>
                                </button>
                            </div>
                            <div class="layui-btn-group layui-hide-xs">
                                <button class="layui-btn layui-btn layui-btn-xs" title="展开阅读">
                                    <i class="fa fa-arrows-h fa-fw"></i>
                                </button>
                                <button class="layui-btn layui-btn layui-btn-xs" title="全屏阅读">
                                    <i class="fa fa-arrows-alt fa-fw"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="article-detail-title">
                        {{ news.title }}
                    </div>
                    <div class="article-detail-abstract">
                        <span class="layui-badge">摘要</span>
                        <span id="abstract">
                            {{ news.description }}
                        </span>
                    </div>
                    <div class="article-detail-content w-e-text">
                        <div v-html="news.contents">

                        </div>
                        <lay-backtop target="#app" :showHeight="200" :bottom="100" bgcolor="#5FB878" icon="layui-icon-up"
                            circle></lay-backtop>
                        <div class="article-detail-copyright">
                            <p>版权声明：本文由<a href="/" style="color:#1E9FFF;margin:0 5px;">爱上歆随懿恫</a>原创出品，转载请注明出处！</p>
                            <p>本文链接：
                                <router-link :to="'/news/newsdetail?id=' + news.id" :title="news.title">{{ news.title
                                }}</router-link>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="article-component">
                    <div class="component-box">
                        <a href="javascript:;" class="praise" blog-event="praise"><i
                                class="fa fa-thumbs-up fa-fw"></i>点赞（<span id="praiseCnt">0</span>）</a>
                        <a href="javascript:;" class="reword" blog-event="reword">赏</a>
                        <a href="javascript:;" class="share" blog-event="share"><i
                                class="fa fa-share-alt fa-fw"></i>分享（<span id="shareCnt">0</span>）</a>
                    </div>
                </div>


                <div class="blog-card blog-card-padding shadow">
                    <fieldset class="layui-elem-field layui-field-title" style="margin-bottom:0">
                        <legend>来说两句吧</legend>
                        <div class="layui-field-box">
                            <div class="layui-form blog-editor" a>

                                <div class="layui-form-item">
                                    <textarea style="display: none;" name="EditorContent" lay-verify="content"
                                        id="remarkEditor" placeholder="请输入内容" class="layui-textarea layui-hide"></textarea>
                                </div>
                                <div class="layui-form-item">
                                    <!-- <button class="layui-btn  " v-on:click="formRemark()">提交评论</button> -->
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <div class="blog-card-title">最新评论</div>
                    <div class="emptybox">
                        <div id="idted"></div>
                        <!-- <ul class="blog-comment" style="text-align: left;">
                            <li v-for="(item ) in conlist" :key="item">
                                <div class="comment-parent">
                                    <a name="remark-49"></a>
                                    <img :src="item.url" :alt="item.username">
                                    <div class="info">
                                        <span class="username">{{item.username}}</span>
                                    </div>
                                    <div class="content">
                                        <span v-html="item.contents"></span>
                                    </div>
                                    <p class="info info-footer"><span class="time">{{item.AddTime}}</span><a href="javascript:;" class="btn-reply" v-on:click="Reply(item)">回复</a></p>
                                </div>
                                <div class="replycontainer layui-hide">
                                    <div class="layui-form">
                                        <div class="layui-form-item">
                                            <textarea name="replyContent" id="replyContent" lay-verify="replyContent" placeholder="请输入回复内容" class="layui-textarea" style="min-height:80px;"></textarea>
                                        </div>
                                        <div class="layui-form-item">
                                            <button class="layui-btn layui-btn-xs" v-on:click="formReply(item)">提交</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul> -->
                        <div id="newspage"></div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md8 right">
                <div class="layui-row layui-col-space10">
                    <div class="layui-col-sm12 layui-col-md24 padding0">
                        <div class="blog-card shadow">

                            <taobao></taobao>


                        </div>
                    </div>

                    <music></music>
                    <randomnew></randomnew>
                    <randomppt></randomppt>
                    <div class="layui-col-sm12 layui-col-md24">
                        <div class="blog-card shadow sr-rightmodule">
                            <div class="blog-card-title">
                                <span class="icon"><i class="layui-icon" aria-hidden="true">&#xe6c6;</i></span>
                                <span class="text">微信关注</span>
                            </div>
                            <ul class="blog-card-ul">
                                <li style="text-align: center;">
                                    <img src="/images/qrcode_for_gh_8044f5512351_258.jpg" />
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
                <!--右边悬浮 平板或手机设备显示-->
                <div class="category-toggle"><i class="fa fa-chevron-left"></i></div>
            </div>
        </div>
        <!-- 使用样式属性自定义 -->




        <!--遮罩-->
        <div class="blog-mask animated layui-hide"></div>
        <!--js-->

    </div>
</template>
<style>
.article-detail-content img,
image {
    width: 100% !important;
}
</style>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import http from 'webosutils/lib/http';
import { useRoute, useRouter } from "vue-router";
import taobao from '../../components/card/taobao.vue'
import randomppt from "../../components/card/randomppt.vue";
import randomnew from '../../components/card/randomnew.vue';
const news = ref([]) as any;
const data = ref([]) as any;
const lastarticle = ref([]) as any;
const nextarticle = ref([]) as any;
const isdata = ref([]) as any;
const conlist = ref([]) as any;
const document=window.document as any;
const handleBack = () => {
    window.history.back();
}
const router = useRouter();
const route = useRoute();
const ajax = () => {

    http.post("/v1/api/portalsite/GetNewDetails", { id: route.query.id }).then(res => {
        document.title = res.data.title;
        news.value = res.data;
        let head = document.getElementsByTagName('head');
        let meta_keyword = document.createElement('meta');
        if (document.querySelector('meta[name="keywords"]')) {
            document.querySelector('meta[name="keywords"]').setAttribute('content',news.value.description)
        } else {
            meta_keyword.setAttribute('name', 'keywords')
            meta_keyword.setAttribute('content', news.value.description)
            head[0].appendChild(meta_keyword)
        }
        let meta_description = document.createElement('meta');
        if (document.querySelector('meta[name="description"]')) {
            document.querySelector('meta[name="description"]').setAttribute('content',news.value.title );
        } else {
            meta_description.setAttribute('name', 'description')
            meta_description.setAttribute('content',news.value.title )
            head[0].appendChild(meta_description)
        }
        nextarticle.value = {
            data: res.nextarticle, isdata: res.nextarticle == null ? false : true
        };
        lastarticle.value = {
            data: res.lastarticle, isdata: res.lastarticle == null ? false : true
        }
    }).catch(res => {




    });



}

// export default {
//     name: 'detail',
//    // components:{randomnew,taobao,music},
//     data() {
//         return {
//            news: [],
//                 data: [],
//                 lastarticle: [],
//                 nextarticle: [],
//                 isdata: [],
//                 newslist: [],
//                 conlist: []
//         }
//     }, mounted: function () {
//        var m = this;
//         m.ajax();


//     },watch: {
//             '$route'(to, from) { //监听路由是否变化
//             var m=this;
//                 //这里需要清空评论
//                 m.conlist = [];
//                 //调数据
//                 m = this;
//                 m.ajax();
//               layui.$('body,html').animate({ scrollTop: 0 }, 500);
//             }
//         },
//     methods: {
//         ajax: function () {
//             var m = this;
//          m.$post(m.host + "/v1/api/portalsite/GetNewDetails", {  id: this.$route.query.id}).then(res => {
//                 console.log(res);

//             }).catch(res => {
//                       document.title = res.data.title;
//                         m.news = res.data;
//                         m.nextarticle = {
//                             data:  res.nextarticle, isdata:  res.nextarticle == null ? false : true
//                         };
//                         m.lastarticle = {
//                             data:  res.lastarticle, isdata:  res.lastarticle == null ? false : true
//                         }

//                 setTimeout(function () {
//                     var layedit=layui.layedit,form=layui.form;
//                     var remarkEditor = layedit.build("remarkEditor", {
//                     height: 150,
//                     tool: ["face", "|", "left", "center", "right", "|", "link"]
//                 }); //建立编辑器
//               layui.$('body,html').animate({ scrollTop: 0 }, 500);
//               layui.$(function () {
//                     /msie[6 | 7 | 8 | 9]/i.test(navigator.userAgent) || (window.sr = new ScrollReveal({
//                         reset: !1
//                     }), sr.reveal(".sr-left", {
//                         origin: "left",
//                         scale: 1,
//                         opacity: .1,
//                         duration: 1200
//                     }), sr.reveal(".sr-bottom", {
//                         scale: 1,
//                         opacity: .1,
//                         distance: "60px",
//                         duration: 1e3
//                     }), sr.reveal(".sr-listshow", {
//                         distance: "30px",
//                         duration: 1e3,
//                         scale: 1,
//                         opacity: .1
//                     }), sr.reveal(".sr-rightmodule", {
//                         origin: "top",
//                         distance: "60px",
//                         duration: 1e3,
//                         scale: 1,
//                         opacity: .1
//                     }));
//                     layer.photos({
//                         photos: ".article-left",
//                         anim: 5
//                     });
//                     layer.photos({
//                         photos: ".article-detail-content",
//                         anim: 5,
//                         move: !1
//                     })
//                 });
//                // prettyPrint();

//                 //文章顶部工具栏按钮点击事件
//               layui.$('.tool-box button').on('click', function () {
//                     var title = layui.$(this).attr('title');
//                     switch (title) {
//                         case '全屏阅读':
//                             var content = layui.$('.article-detail').prop("outerHTML");
//                             layer.open({
//                                 title: false,
//                                 type: 1,
//                                 content: content,
//                                 closeBtn: 0,
//                                 scrollbar: false,
//                                 area: ['100vw', '100vh'],
//                                 success: function (layero, index) {
//                                   layui.$(layero).find('.article-tool').html('<div class="tool-box"><div class="layui-btn-group"><button class="layui-btn layui-btn-primary layui-btn-xs" title="关闭全屏"><i class="fa fa-compress fa-fw"></i></button></div></div>');
//                                   layui.$(layero).find('.article-tool button').on('click', function () {
//                                         layer.close(index);
//                                     });
//                                 }
//                             });
//                             break;
//                         case '展开阅读':
//                           layui.$('.right').hide();
//                           layui.$('.left').css({
//                                 'width': '100%'
//                             });
//                           layui.$(this).attr('title', '收缩阅读');
//                           layui.$(this).html('<i class="fa fa-compress fa-fw"></i>');
//                             break;
//                         case '收缩阅读':
//                           layui.$('.right').show();
//                           layui.$('.left').css('width', '');
//                           layui.$(this).attr('title', '展开阅读');
//                           layui.$(this).html('<i class="fa fa-arrows-h fa-fw"></i>');
//                             break;
//                         case '字体缩小':
//                             var fontsize = Number(layui.$('.article-detail').data('fontsize'));
//                             fontsize = fontsize - 1;
//                             if (fontsize < 12) fontsize = 12;
//                           layui.$('.article-detail').data('fontsize', fontsize);
//                           layui.$('.article-detail-abstract,.article-detail-content').css('font-size', fontsize + 'px');
//                             break;
//                         case '字体还原':
//                           layui.$('.article-detail').data('fontsize', 14);
//                           layui.$('.article-detail-abstract,.article-detail-content').css('font-size', '');
//                             break;
//                         case '字体放大':
//                             var fontsize = Number(layui.$('.article-detail').data('fontsize'));
//                             fontsize = fontsize + 1;
//                             if (fontsize > 20) fontsize = 20;
//                           layui.$('.article-detail').data('fontsize', fontsize);
//                           layui.$('.article-detail-abstract,.article-detail-content').css('font-size', fontsize + 'px');
//                             break;
//                         case '静音':
//                           layui.$(this).attr('title', '开启');
//                           layui.$(this).html('<i class="fa fa-volume-off fa-fw"></i>');
//                             ap.volume(0, false);
//                             break;
//                         case '开启':
//                           layui.$(this).attr('title', '静音');
//                           layui.$(this).html('<i class="fa fa-volume-up fa-fw"></i>');
//                             ap.volume(0.5, false);
//                             break;
//                         default:
//                     }
//                 });

//                 //回复按钮点击事件
//               layui.$('.btn-reply').on('click', function () {
//                     var targetid = layui.$(this).data('targetid')
//                         , targetName = layui.$(this).data('targetname')
//                         , $container = layui.$(this).parent('p').parent().siblings('.replycontainer');
//                     if (layui.$(this).text() == '回复') {
//                         $container.find('textarea').attr('placeholder', '回复【' + targetName + '】');
//                         $container.removeClass('layui-hide');
//                         $container.find('input[name="targetUserid"]').val(targetid);
//                       layui.$(this).parents('.blog-comment li').find('.btn-reply').text('回复');
//                       layui.$(this).text('收起');
//                     } else {
//                         $container.addClass('layui-hide');
//                         $container.find('input[name="targetUserid"]').val(0);
//                       layui.$(this).text('回复');
//                     }
//                 });

//                 //监听留言回复提交
//                 form.on('submit(formReply)', function (data) {
//                     if (layui.$(data.elem).hasClass('layui-btn-disabled')) {
//                         return false;
//                     }
//                     var index = layer.load(1);
//                     $.ajax({
//                         type: 'post',
//                         url: '/api/article/reply',
//                         data: data.field,
//                         success: function (res) {
//                             layer.close(index);
//                             if (res.code === 1) {
//                                 layer.msg(res.msg, { icon: 6 });
//                                 setTimeout(function () {
//                                     location.reload(true);
//                                 }, 500);
//                             } else {
//                                 if (res.msg != undefined) {
//                                     layer.msg(res.msg, { icon: 5 });
//                                 } else {
//                                     layer.msg('程序异常，请重试或联系作者', { icon: 5 });
//                                 }
//                             }
//                         },
//                         error: function (e) {
//                             layer.close(index);
//                             layer.msg("请求异常", { icon: 2 });
//                         }
//                     });
//                     return false;
//                 });
//                 var events = {
//                     //分享
//                     share: function () {
//                         shareIndex = layer.open({
//                             type: 1,
//                             shade: 0.6,
//                             shadeClose: true,
//                             area: ['auto', '50px'],
//                             resize: false,
//                             skin: 'share',
//                             closeBtn: 0,
//                             anim: 1,
//                             title: false, //不显示标题
//                             content: layui.$('.bdsharebuttonbox')
//                         });
//                     }

//                     //点赞
//                     , praise: function () {
//                         var localdata = layui.data('blog')
//                             , articleid = layui.$('#hidArticleid').val()
//                             , self = this;
//                         if (localdata['praise' + articleid]) {
//                             layer.tips('你已点过赞了，若收获颇大，可打赏作者！^_^', self, { tips: 1, time: 2000 });
//                             return;
//                         }
//                         $.post('/api/article/praiseorshare', { articleid: articleid, type: 'praise' }, function (res) {
//                             if (res.code === 1) {
//                                 layui.data('blog', {
//                                     key: 'praise' + layui.$('#hidArticleid').val()
//                                     , value: true
//                                 });
//                                 //点赞+1
//                                 var cnt = Number(layui.$('#praiseCnt').text()) + 1;
//                               layui.$('#praiseCnt').text(cnt);
//                                 layer.tips('Thank you ^_^', self, { tips: 1, time: 2000 });
//                             } else {
//                                 layer.msg('点赞出错啦！0.0');
//                             }
//                         });
//                     }

//                     //打赏
//                     , reword: function () {
//                         layer.tab({
//                             area: ['50%', '373px'],
//                             shade: 0.6,
//                             tab: [
//                                 {
//                                     title: '微信',
//                                     content: '<img style="width:330px;height:330px;" src="/images/wx.jpg" />'
//                                 }, {
//                                     title: '支付宝',
//                                     content: '<img style="width:330px;height:330px;" src="/images/zfb.jpg" />'
//                                 }]
//                         });

//                     }
//                 };

//               layui.$('*[blog-event]').on('click', function () {
//                     var eventName = layui.$(this).attr('blog-event');
//                     events[eventName] && events[eventName].call(this);
//                 });

//               layui.$('*[blog-event="reword"]').on('mouseover', function () {
//                     layer.tips('一元足以感动我 ^_^', this, { tips: 1, time: 2000 });
//                 });
//               layui.$(".category-toggle").click(function (e) {
//                     e.stopPropagation();
//                     openlife()
//                 });
//                 function openlife() {
//                   layui.$(".category-toggle").addClass("layui-hide");
//                   layui.$(".article-category").unbind("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend");
//                   layui.$(".article-category").removeClass("categoryOut");
//                   layui.$(".article-category").addClass("categoryIn");
//                   layui.$(".article-category").addClass("layui-show")
//                 }
//                 function loselife() {
//                   layui.$(".article-category").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
//                         function () {
//                           layui.$(".article-category").removeClass("layui-show");
//                           layui.$(".category-toggle").removeClass("layui-hide")
//                         });
//                   layui.$(".article-category").removeClass("categoryIn");
//                   layui.$(".article-category").addClass("categoryOut")
//                 }
//               layui.$(".blog-body,.blog-footer").click(function () {
//                     loselife();
//                 });
//               layui.$(".article-category").click(function () {
//                     loselife();
//                 });
//             }, 200);

//             });



//         }, fenye: function () {
//             if (page > 1) {

//                 return;
//             }
//             var laypage = layui.laypage
//             //执行一个laypage实例
//             laypage.render({
//                 elem: 'newspage' //注意，这里的 test1 是 id，不用加 # 号
//                 , count: count //数据总数，从服务端得到
//                 , jump: function (obj, first) {

//                     page = obj.curr;  //改变当前页码
//                     limit = obj.limit;
//                     //首次不执行
//                     if (!first) {
//                         //do something
//                         m.ajax();
//                     }
//                 }
//             });
//         }, open: function (_this) {
//                 window.location.href = '#/news/' + _this.id;
//             }
//         , SetColor: function (_this) {

//             if (_this.titleColor === null || _this.titleColor === undefined) {
//                 return "#009688";
//             } else return _this.titleColor;

//         },
//         gongdong: function () {

//         /msie[6 | 7 | 8 | 9]/i.test(navigator.userAgent) || (window.sr = new ScrollReveal({
//             reset: !1
//         }), sr.reveal(".sr-left", {
//             origin: "left",
//             scale: 1,
//             opacity: 0.1,
//             duration: 1200
//         }), sr.reveal(".sr-bottom", {
//             scale: 1,
//             opacity: 0.1,
//             distance: "60px",
//             duration: 1e3
//         }), sr.reveal(".sr-listshow", {
//             distance: "30px",
//             duration: 1e3,
//             scale: 1,
//             opacity: 0.1
//         }), sr.reveal(".sr-rightmodule", {
//             origin: "top",
//             distance: "60px",
//             duration: 1e3,
//             scale: 1,
//             opacity: 0.1
//         }));
//         layer.photos({
//             photos: ".article-left",
//             anim: 5
//         });
//         layer.photos({
//             photos: ".article-detail-content",
//             anim: 5,
//             move: !1
//         })

//     }
//     },
//     closemuen() {

//         //$("#_on_off")[0].removeClass("fa-times");
//         //$("#_on_off")[0].addClass("fa-navicon");
//       layui.$(".blog-mask").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
//             function () {

//               layui.$(".blog-mask").addClass("layui-hide")
//             });
//       layui.$(".blog-nav-left").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend",
//             function () {

//               layui.$(".blog-nav-left").addClass("layui-hide")
//             });
//       layui.$(".blog-mask").removeClass("maskIn");
//       layui.$(".blog-mask").addClass("maskOut");
//       layui.$(".blog-mask").removeClass("layui-show");
//       layui.$(".blog-nav-left").removeClass("leftIn");
//       layui.$(".blog-nav-left").addClass("leftOut");
//       layui.$(".blog-nav-left").removeClass("layui-show")
//     }
//     ,
//     created() {
//         // this.closemuen();
//     }
// }
ajax();
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>